<template>
  <div class="clockBreath">
    <div class="container" :class="isGrow ? 'grow' : 'shrink'">
      <div class="pointContainer">
        <div class="point"></div>
      </div>
      <div class="gradientCycle"></div>
      <div class="text">{{ text }}</div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
export default defineComponent({
  setup() {
    const totalTime = 7500;
    const breathTime = (totalTime / 5) * 2;
    const holdOnTime = totalTime / 5;

    const text = ref("吸气");
    const isGrow = ref(true);

    function breath() {
      isGrow.value = true;
      setTimeout(() => {
        text.value = "HoldOn";
      }, breathTime);
      setTimeout(() => {
        text.value = "呼气";
        isGrow.value = false;
      }, breathTime + holdOnTime);
    }
    function cycle() {
      breath();
      setInterval(() => {
        breath();
      }, totalTime);
    }

    onMounted(() => {
      cycle();
    });

    return { text, isGrow };
  },
});
</script>
<style lang="scss" scoped>
.clockBreath {
  .container {
    width: 15rem;
    height: 15rem;
    margin: 5rem auto;
    position: relative;
  }
  .gradientCycle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
      #2ecc71 0%,
      #27ae60 40%,
      #ecf0f1 40%,
      #ecf0f1 60%,
      #16a085 60%,
      #1abc9c 100%
    );
  }
  .text {
    color: #fff;
    text-align: center;
    width: 13.5rem;
    height: 13.5rem;
    font-size: 1.1rem;
    letter-spacing: 4px;
    line-height: 13.5rem;
    border-radius: 50%;
    background-color: #34495e;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .pointContainer {
    z-index: 10;
    width: 1rem;
    height: calc(50% + 1.5rem);
    position: absolute;
    left: 7rem;
    top: -1.5rem;
    transform-origin: bottom center;
    animation: rotate 7.5s linear infinite;
  }
  .point {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #fff;
  }
  .grow {
    animation: grow 3s linear forwards;
  }
  .shrink {
    animation: shrink 3s linear forwards;
  }
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes grow {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.2);
    }
  }
  @keyframes shrink {
    from {
      transform: scale(1.2);
    }
    to {
      text-transform: scale(1);
    }
  }
}
</style>
